import React, { useState } from 'react';
import { Avatar, Input, Button, Toast } from 'antd-mobile';
import { SendOutline } from 'antd-mobile-icons';

interface Comment {
    id: string;
    content: string;
    createdAt: string;
    user: {
        id: string;
        nickname: string;
        avatar: string;
    };
}

interface CommentsProps {
    travelId: string;
    comments: Comment[];
    onSubmitComment: (content: string) => Promise<void>;
}

export const Comments: React.FC<CommentsProps> = ({ travelId, comments, onSubmitComment }) => {
    const [commentText, setCommentText] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);

    const handleSubmit = async () => {
        if (!commentText.trim()) {
            Toast.show({
                content: '请输入评论内容',
                position: 'bottom',
            });
            return;
        }

        try {
            setIsSubmitting(true);
            await onSubmitComment(commentText);
            setCommentText('');
            Toast.show({
                content: '评论成功',
                position: 'bottom',
            });
        } catch (error) {
            Toast.show({
                content: '评论失败，请重试',
                position: 'bottom',
            });
        } finally {
            setIsSubmitting(false);
        }
    };

    return (
        <div className="comments-section">
            <div className="comments-list">
                <h3 className="comments-title">评论 ({comments.length})</h3>
                {comments.length === 0 ? (
                    <div className="no-comments">暂无评论，快来抢沙发吧！</div>
                ) : (
                    comments.map((comment) => (
                        <div key={comment.id} className="comment-item">
                            <Avatar src={comment.user.avatar} className="comment-avatar" />
                            <div className="comment-content">
                                <div className="comment-user">{comment.user.nickname}</div>
                                <div className="comment-text">{comment.content}</div>
                                <div className="comment-time">{new Date(comment.createdAt).toLocaleString()}</div>
                            </div>
                        </div>
                    ))
                )}
            </div>

            <div className="comment-input-container">
                <Input
                    placeholder="写下你的评论..."
                    value={commentText}
                    onChange={setCommentText}
                    className="comment-input"
                />
                <Button
                    className="comment-submit"
                    onClick={handleSubmit}
                    loading={isSubmitting}
                    disabled={isSubmitting || !commentText.trim()}
                >
                    <SendOutline />
                </Button>
            </div>
        </div>
    );
}; 